<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美团首页</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      input{
        border: 0;
        outline-style: none;
      }
      .g-nav{
        height: 40px;
        background-color: #f8f8f8;
      }
      .g-search{
        height: 157px;
      }
      .g-subnav{
        height: 467px;
        background-color: #f8f8f9;
      }
      .m-left{
        float: left;
        padding-left: 45px;
      }
      .m-right{
        float: right;
        margin-right: 19px;
      }
      .m-left li{
        float: left;
        
      }
      .m-left li a{
        color: #bbbbbb;
      }
      .m-right li{
        float: left;
        margin-right: 31px;
      }
      
      ul{
        list-style-type: none;
        text-align: center;
        line-height: 40px;
      }
      a,li,i{
        text-decoration: none;
        color: #b3b3b3;
        font-style: normal;
        font-size: 15px;
       
      }
      .u-left{
        margin-right: 27px;
      }
      li a:hover{
        color: #fcbe7d;
      }
      .u-right .u-login{
        color: #fcbe7d;
      }
      .u-cety{
        border: 1px solid black;
        padding: 1px;
      }
      .g-search .m-box{
        position: relative;
        height: 157px;
      }
      .g-search .m-box > img{
        position:absolute;
        height: 46px;
        width: 129px;
        top: 27px;
        left: 45px;
      }
      .g-search .m-box .u-subbox{
        position:absolute;
        top: 27px;
        left: 367px;
        width: 553px;
        height: 41px;
        border-radius: 5px;
        border: 1px solid #b3b3b3;
      }
      .g-search .m-box .u-subbox .u-text{
        float: left;
        line-height: 41px;
        text-indent: 20px;
        width: 473px;
        height: 41px;
        color: #b3b3b3;
      }
      .g-search .m-box .u-subbox input:last-child{
        width: 80px;
        height: 41px;
        background-color: #ffc300;
     
      }
      .g-search .m-box .u-subnav{
        position: absolute;
        left: 310px;
        bottom: 10px;
        color: #181818;
        font-size: 18px;
      }
      .g-search .m-box .u-subnav li{
        float: left;
        margin-right: 42px;
      }
      .g-search .m-box .u-subnav li a{
        color: #181818;
        font-size: 18px;
      }
      .g-search .m-box .u-subnav li a:hover{
        color: #ffc300;
      }
      .g-subnav .m-box2{
        position: relative;
      }
      .g-subnav .m-box2 .m-box-right{
        position: absolute;
        left: 285px;
        top: 10px;
        width: 951px;
        height: 417px;
        
      }
      .g-subnav .m-box2 .m-box-right .box-right-top{
        margin-bottom: 10px;
      }
      .g-subnav .m-box2 .m-box-right .box-right-top .u-img1{
        width: 550px;
        height: 240px;
     
        margin-right: 7px;
      }
      .g-subnav .m-box2 .m-box-right .box-right-top .u-img2{
        width: 150px;
        height: 240px;

      }

      .g-subnav .m-box2 .m-box-right .box-right-top .u-info{
        width: 227px;
        height: 238px;
        background-color: white;
        float: right;
        border: 1px solid #e8e8e8;
      }
      .g-subnav .m-box2 .m-box-right .box-right-top .u-info img{
        border-radius: 50%;
        width: 57px;
        height: 57px;
        margin-left: 86px;
        margin-top: 30px;
        margin-bottom: 10px;
      }
      .g-subnav .m-box2 .m-box-right .box-right-top .u-info p{
        margin-left: 81px;
        margin-bottom: 10px;
        color: #181818;
        font-size: 16px;
        font-weight: bolder;
      }
      .g-subnav .m-box2 .m-box-right .box-right-top .u-info .u-zhuce-1{
        width: 123px;
        height: 38px;
        border-radius: 20px;
        text-align: center;
        line-height: 38px;
        border: 1px solid #b3b3b3;
        margin-left: 53px;
        margin-bottom: 10px;
      }
      .g-subnav .m-box2 .m-box-right .box-right-top .u-info .u-login-1{
        width: 123px;
        height: 38px;
        border-radius: 20px;
        text-align: center;
        line-height: 38px;
        border: 1px solid #b3b3b3;
        margin-left: 53px;
      }
      .g-subnav .m-box2 .m-box-right .box-right-bottom img:nth-child(1){
        width: 269px;
        height: 165px;
        margin-right: 7px;
      }
      .g-subnav .m-box2 .m-box-right .box-right-bottom img:nth-child(2){
        width: 269px;
        height: 165px;
        margin-right: 7px;
      }
      .g-subnav .m-box2 .m-box-right .box-right-bottom img:nth-child(3){
        width: 150px;
        height: 165px;
        
      }
      .g-subnav .m-box2 .m-box-right .box-right-bottom .u-ewm{
        width: 227px;
        height: 163px;
        float: right;
        border: 1px solid #e8e8e8;
        background-color: white;
      }
      .g-subnav .m-box2 .m-box-right .box-right-bottom .u-ewm img{
        width: 75px;
        height: 75px;
        margin-left: 75px;
        margin-top: 15px;
        margin-bottom: 6px;
      }
      
      .g-subnav .m-box2 .m-box-right .box-right-bottom .u-ewm .descrion p:first-child{
          color: #181818;
          font-size: 16px;
          margin-left:58px;
      }
      .g-subnav .m-box2 .m-box-right .box-right-bottom .u-ewm .descrion span{
          color: red;
          font-size: 12px;
          margin-left:68px;
      }
      .g-subnav .m-box2 .m-box-right .box-right-bottom .u-ewm .descrion span:last-child{
          color: #181818;
          font-size: 12px;
          margin-left:10px;
      }
      .g-subnav .m-box2 .m-box-left{
          color: #858585;
          position: absolute;
          margin-left: 45px;
          margin-top: -50px;
          width: 230px;
          height: 475px;
          background-color: white;
          border: 1px solid #e8e8e8;
      }
      .g-subnav .m-box2 .m-box-left .biaoti{
        color: #181818;
        font-size: 19px;
        font-weight: bolder;
        height: 50px;
        margin-left: 15px;
        line-height: 60px;
      }
      .g-subnav .m-box2 .m-box-left .u-nav li{
        height: 30px; 
        color: #858585;
        font-weight: bolder;
        /* background-color: aqua;
        margin-bottom: 10px; */
        
      }
      .g-subnav .m-box2 .m-box-left .u-nav li:hover{
        background-color: #b3b3b3;
      }
      .g-subnav .m-box2 .m-box-left .u-nav li:hover a{
        color: #181818;
      }
      .g-subnav .m-box2 .m-box-left .u-nav{
        text-align: start;
        line-height: 30px;
      }
      .g-subnav .m-box2 .m-box-left .u-nav li{
        width: 230px;
      }
      .g-subnav .m-box2 .m-box-left .u-nav li a {
        margin-left: 30px;
        float: left;
      }
      .g-subnav .m-box2 .m-box-left .u-nav li i{
        float: right;
       margin-right: 10px;
      }
      .lo-img{
        width: 15px;
        height: 15px;
      }
    </style>
</head>
<body>
    <div class="g-main">
      <div class="g-nav">
        <ul class="m-left">
          
          <li class="u-left">
            <i><img class="lo-img" src="./images/lo.jpeg" alt=""></i>
            <a href="#">北京</a>
            <a href="#" class="u-cety">切换城市</a>
            <i>[</i>
            <a href="#">门头沟区</a>
            <a href="#">大厂回族自治县</a>
            <a href="#">廊坊</a>
            <i>]</i>
          </li>
          <li class="u-right">
            <a href="#" class="u-login">立即登录</a>
            <a href="#">注册</a>
          </li>
        </ul>
        <ul class="m-right">
          <li><a href="#">我的美团</a></li>
          <li><a href="#">手机APP</a></li>
          <li><a href="#">商家中心</a></li>
          <li><a href="#">美团规则</a></li>
          <li><a href="#">网站导航</a></li>
          
        </ul>
      </div>
      <div class="g-search">
        <div class="m-box">
          <img src="./images/logo.png" alt="">
          <div class="u-subbox">
            <input type="text" class="u-text" value="搜索商家或地点">
            <input type="button" class="u-search" value="搜索">
          </div>
          <ul class="u-subnav">
              <li><a href="#">美团外卖</a></li>
              <li><a href="#">猫眼电影</a></li>
              <li><a href="#">美团酒店</a></li>
              <li><a href="#">民宿公寓</a></li>
              <li><a href="#">商家入驻</a></li>
              <li><a href="#">美团公益</a></li>
            </ul>
        </div>
      </div>
      <div class="g-subnav">
        <div class="m-box2">
          <div class="m-box-left">
             <div class="biaoti">全部分类</div>
             
              <ul class="u-nav">
                <li><a href="#">美食</a><i>></i></li>
                <li><a href="#">外卖</a><i>></i></li>
                <li><a href="#">酒店</a><i>></i></li>
                <li><a href="#">民宿</a><i>></i></li>
                <li><a href="#">猫眼电影</a><i>></i></li>
                <li><a href="#">机票/火车票</a><i>></i></li>
                <li><a href="#">休闲娱乐/KTV</a><i>></i></li>
                <li><a href="#">生活服务</a><i>></i></li>
                <li><a href="#">丽人/没发</a><i>></i></li>
              </ul>
              
          </div>
          <div class="m-box-right">
            <div class="box-right-top">
              <img class="u-img1" src="./images/banner.jpeg" alt="">
              <img class="u-img2" src="./images/life.jpeg" alt="">
              <div class="u-info">
                <img src="./images/avatar.jpeg" alt="">
                <p>Hi! 你好</p>
                <div class="u-zhuce-1">注册</div>
                <div class="u-login-1">立即登录</div>
              </div>
            </div>
            <div class="box-right-bottom">
              <img src="./images/hotel.png" alt="">
              <img src="./images/other.jpeg" alt="">
              <img src="./images/company.jpeg" alt="">
              <div class="u-ewm"> 
                <img src="./images/erweima.png" alt="">
                <div class="descrion">
                  <p>美团APP手机版</p>
                  <span>1元起</span><span>吃喝玩乐</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
</body>
</html>